<template>
  <div class="file-upload">
    <h4>{{ title }}</h4>
    <div class="file-preview"></div>
    <el-select size="mini"></el-select>
    <div class="buttons">
      <el-button size="mini" type="primary">截图</el-button>
      <el-button size="mini" type="primary">上传</el-button>
      <el-button size="mini" type="danger">删除</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
@Component
class FileUpload extends Vue {
  @Prop() title!: string
}
export default FileUpload
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.file-upload {
  width: 100%;
  height: 100%;
  margin: 0 8px;
  #flex(column, center, flex-start);
  h4 {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    margin-block: 0;
    margin: 5px 0;
    padding-left: 5px;
    font-weight: 900;
    #color(color, --primary-text-color);
  }
  h4::before {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    #color(background-color, --primary-blue-color);
  }
  .file-preview {
    width: 100%;
    flex: 1;
    margin: 5px 0;
    border: solid 1px;
    #color(border-color, --primary-border-color);
    #flex(row, center, center);
  }
  .el-select {
    width: 100%;
  }
  .buttons {
    width: 100%;
    margin: 5px 0;
    #flex(row, center, space-between);
    .el-button {
      flex: 1;
      margin-right: 5px;
    }
    .el-button:last-child {
      margin-right: 0;
    }
  }
}
</style>
